<template>
	<view class="edit_container">
		<!-- 头像 -->
		<view class="edit_avatar mt40">
			<view class="u-avatar">
				<u-avatar :src="src" size="120"></u-avatar>
			</view>
			<view class="f25 mt20 text-center">
				更换头像
			</view>
		</view>
		<view class="deit_content mt40">
			<view class="flex align-center">
				<view class="f33">
					昵称
				</view>
				<view class="ml30">
					<u--input  placeholder="请输入昵称" border="surround" v-model="nickName" @change="change"></u--input>
				</view>
			</view>
			<view class="flex align-center mt50">
				<view class="f33">
					姓名
				</view>
				<view class="ml30">
					<u--input  placeholder="请输入姓名" border="surround" v-model="name" @change="change"></u--input>
				</view>
			</view>
			<view class="flex align-center mt50">
				<view class="f33">
					年龄
				</view>
				<view class="ml30">
					30
				</view>
			</view>
			<view class="flex align-center mt50">
				<view class="f33">
					性别
				</view>
				<view class="ml30">
					保密
				</view>
			</view>
			<view class="flex align-center mt50">
				<view class="f33">
					手机号
				</view>
				<view class="ml30">
					<u--input  placeholder="请输入手机号" border="surround" v-model="phone" @change="change"></u--input>
				</view>
			</view>
			<view class="flex flex-between align-center mt50">
				<view class="flex align-center">
					<view class="f33">
						身份证号
					</view>
					<view class="ml30">
						<u--input border="surround" v-model="IDCard" @change="change"></u--input>
					</view>
				</view>
			</view>
			<view class="flex mt50">
				<view class="f33">
					地址
				</view>
				<view class="ml30">
					<u--textarea height="300" border="surround"  v-model="address" placeholder="请输入地址"></u--textarea>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '../../static/logo.png',
				nickName: '金邻邦小助手',
				name: '金邻邦',
				phone: '17777811579',
				IDCard: '41042**************3322',
				address: ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit_container{
		width: 90%;
		margin: 0 auto;
		
		.edit_avatar{
			width: 100%;
			.u-avatar{
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		.deit_content{
			/deep/ .u-textarea{
				background: none;
				border: 1rpx solid #333;
				width: 500rpx;
			}
			
		}
	}
</style>